<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>科研成果管理系统</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .cms_login {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            background-repeat: no-repeat;
            background-image: url(img/3.jpg);
            background-size: 100% 100%;
        }

        .flexCenter {
            text-align: center;
            margin: auto;
        }

        .cms_login_container {
            width: 70%;
            height: 70%;
            display: flex;
            justify-content: center;
        }

        .cms_login_image {
            width: 60%;
            height: 100%;
        }

        .cms_login_from {
            width: 40%;
            margin-left: -138%;
            height: 100%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 0px 10px #ccc;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .divBox {
            display: flex;
            justify-content: center;
            width: 80%;
            height: 46px;
            margin-top: 20px;
            margin-left: 10%;
            position: relative;
        }

        .cms_login_logo {
            display: flex;
            justify-content: center;
            width: 80%;
            height: 60px;
            /* border: 1px solid green; */
            margin-left: 10%;
            margin-bottom: 22px;
            margin-top: 25px;
        }

        .cms_login_img {
            width: 44px;
            height: 44px;
            position: absolute;
            top: 1px;
            left: 1px;
        }

        .cms_login_ipt {
            width: 100%;
            outline: none;
            padding-left: 50px;
        }

        .cms_login_ipt60 {
            width: 60%;
            outline: none;
            padding-left: 50px;
        }

        .cms_login_ver {
            width: 30%;
            outline: none;
            margin-left: 8%;
            border: 1px solid #c32c2c;
            background-color: #bd7070;
            line-height: 46px;
            letter-spacing: 4px;
            border-radius: 4px;
            cursor: default;
            color: white;
        }

        .margin_top60 {
            margin-top: 40px;
        }

        .login_btn {
            width: 100%;
            height: 60px;
            letter-spacing: 10px;
            font-size: 24px;
            background-color: green;
            border: none;
            outline: none;
            border-radius: 10px;
            color: white;
        }

        .login_btn:hover {
            background-color: #044468;
            border: none;
            outline: none;
        }
    </style>

</head>


<body>


<div class="cms_login">
    <div class="cms_login_container flexCenter" style="min-height:390px;">
        <div class="cms_login_image" style="min-width: 380px;">
            <!-- <img src="./leftimg_04.png" alt=""> -->
        </div>
        <div class="cms_login_from" style="min-width: 380px;">
            <div class="cms_login_logo"><span style="font-size:24px;">科研成果管理系统</span></div>
            <div class="divBox"><img class="cms_login_img" src="img/username_mark.png">
                <input type="text" name="userId" id="userId" class="cms_login_ipt" value="" type="text"
                       placeholder="请输入用户名"></div>
            <div class="divBox"><img class="cms_login_img" src="img/password_mark.png">
                <input type="password" name="userPaswd" id="userPaswd" placeholder="请输入密码" value=""
                       class="cms_login_ipt"></div>
            <div class="divBox">
                <img class="cms_login_img" src="img/verify_mark.png">
                <input type="text" placeholder="验证码" class="cms_login_ipt60" id="cms_login_ver_ipt">
                <span class="cms_login_ver" value="6666" id="cms_login_ver">1735</span>
            </div>

            <div class="divBox margin_top60" style="border:none;">
                <input class="login_btn" type="button" value="登录" style="cursor: pointer;" onclick="inputJudge()">
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.12.4.js"></script>
<script>


    //添加回车键事件
    $(document).ready(function (e) {
        $(this).keydown(function (e) {
            if (e.which == "13") {
                inputJudge();
            }
        })
    });

    // 随机验证码
    var m = parseInt(Math.random(0, 9) * (9999 - 1000) + 1000);
    var n = $(".cms_login_ver").text(m)

    function inputJudge() {
        var userId = document.getElementById("userId").value.replace(/(^\s*)|(\s*$)/g, "");
        var userPaswd = document.getElementById("userPaswd").value.replace(/(^\s*)|(\s*$)/g, "");
        var checkCode = document.getElementById("cms_login_ver_ipt").value;
        if (checkCode != m) {
            alert("请输入正确的验证码");
            return;
        }

        if (userId == "" || userPaswd == "") {
            alert("请输入有效的用户名或密码！");
        } else {
            goToPage(userId, userPaswd);
        }
    }

    function goToPage(userId, userPaswd) {
        $.ajax({
            url: "login",//对应的Controller 指定登录
            data: {"userId": userId, "userPaswd": userPaswd}, //字符拼接的方式添加参数 后台可用MVC捕捉 或创建Bean对象
            type: "POST",//HTTP请求方式
            dataType: "JSON",//返回值的类型。
            success: function (result) { //请求事件成功的回调函数
                if (result.code == 0) {
                    window.sessionStorage.setItem("userId", userId);
                    if (result.data.userType == 1) {
                        //根据相应权限码 进入相应页面 1代表管理员
                        window.location.replace("./admin/admin.jsp");
                    } else if (result.data.userType == 3) {
                        window.location.replace("./teacher/teacher.jsp");
                    } else {
                        window.location.replace("./index.jsp");
                    }
                } else {
                    alert(result.message);
                }
            },
            error: function (data) {//处理页面出错以后执行的函数。
                console.log(data);
                window.location.replace("./index.jsp");
            }
        });
    }
</script>
</body>
</html>
